import Vue from 'vue'

const METRIC_SIZE = 40
// const padding = 20

const props = {
  x: {
    type: Number,
    default: 0,
  },
  y: {
    type: Number,
    default: 0,
  },
  width: {
    type: Number,
    default: 300,
  },
  height: {
    type: Number,
    default: 400,
  },
}

Vue.component('vertical-metric', {
  functional: true,
  props: {
    ...props,
  },
  render(createElement, context) {
    const { width, height, x, y } = context.props
    console.log(width, height, '===vertical')
    return (
      <v-group x={x} y={y}>
        <v-line
          points={[0, 0, METRIC_SIZE, 0]}
          stroke="black"
          strokeWidth={1}
        />
        <v-line
          config={{ points: [0, height, METRIC_SIZE, height] }}
          stroke="black"
          strokeWidth={1}
        />
        <v-arrow
          fill="black"
          stroke="black"
          config={{ points: [METRIC_SIZE / 2, 1, METRIC_SIZE / 2, height - 1] }}
          pointerAtBeginning={true}
          opacity={0.8}
          pointerWidth={5}
          pointerLength={5}
          strokeWidth={1}
        />
        <v-label
          config={{ x: METRIC_SIZE / 2 - 15, y: height / 2 }}
          rotation={-90}
        >
          <v-tag fill="#f7f8fa" stroke="#f7f8fa" />
          <v-text padding={10} config={{ text: height }} />
        </v-label>
      </v-group>
    )
  },
})

Vue.component('horizontal-metric', {
  functional: true,
  props: { ...props },
  render(createElement, context) {
    const { width, height, x, y } = context.props
    console.log(width, height, x, y, '===horizontal')
    return (
      <v-group x={x} y={y}>
        <v-arrow
          config={{ points: [0, METRIC_SIZE / 2, width, METRIC_SIZE / 2] }}
          stroke="black"
          fill="black"
          pointerAtBeginning
          opacity={0.8}
          pointerWidth={5}
          pointerLength={5}
          strokeWidth={1}
        />
        <v-line
          config={{ points: [0, 0, 0, METRIC_SIZE] }}
          stroke="black"
          strokeWidth={1}
        />
        <v-line
          config={{ points: [width, 0, width, METRIC_SIZE] }}
          stroke="black"
          strokeWidth={1}
        />
        <v-label config={{ x: width / 2 - 20, y: METRIC_SIZE / 2 - 13 }}>
          <v-tag fill="#f7f8fa" stroke="#f7f8fa" />
          <v-text padding={10} config={{ text: width }} />
        </v-label>
      </v-group>
    )
  },
})

export default {
  props: {
    configs: {
      type: Array,
      default: () => [],
    },
  },
  render(h) {
    // todo 递归画标尺
    const { props } = this.configs[0] || { props: null }
    if (!props) {
      return null
    }
    const { width, height, x, y } = props
    const verticalComponents = [
      <vertical-metric x={x} y={y} width={width} height={height} />,
    ]
    const horizontalComponents = [
      <horizontal-metric x={x} y={y} width={width} height={height} />,
    ]

    return (
      <v-group>
        <v-group x={width}>{verticalComponents}</v-group>
        <v-group y={height}>{horizontalComponents}</v-group>
      </v-group>
    )
  },
}
